<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Static Master/Detail Pattern -- Multiple Address Detail example</title>

		<script src="../../../../dojo/dojo.js"
				type="text/javascript"
				djConfig="parseOnLoad: true, isDebug: true">
		</script>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript" >
		  dojo.require("dojox.mvc");
		  dojo.require("dojox.mvc.Group");
		  dojo.require("dijit.form.TextBox");
		  dojo.require("dijit.form.Button");
		  dojo.require("dojo.parser");

		  // Initial data
		  var order = {
			  "Serial" : "360324",
			  "First"  : "John",
			  "Last"   : "Doe",
			  "Email"  : "jdoe@example.com",
			  "ShipTo" : {
				  "Street" : "123 Valley Rd",
				  "City"   : "Katonah",
				  "State"  : "NY",
				  "Zip"	   : "10536"
			  },
			  "BillTo" : {
				  "Street" : "17 Skyline Dr",
				  "City"   : "Hawthorne",
				  "State"  : "NY",
				  "Zip"	   : "10532"
			  }
		  };

		  // The dojox.mvc.StatefulModel class creates a data model instance
		  // where each leaf within the data model is decorated with dojo.Stateful
		  // properties that widgets can bind to and watch for their changes.
		  var model = dojox.mvc.newStatefulModel({ data : order });
		</script>
	</head>
	<body class="claro">
		<div id="wrapper">
		<div id="header">
		  <div id="navigation">
		  </div>
		  <div id="headerInsert">
			<h1>Order Shipping Details</h1>
			<h2>Data Binding Example - Group Container.</h2>
		  </div>
		</div>
		<div id="main">
		  <div id="leftNav">
		  </div>
		  <div id="mainContent">
		<!--
			The group container denotes some logical grouping of widgets and also serves
			to establish a parent data binding context for its children.
			The ref value for the outermost container obtains the binding from the
			"page scope" itself.
		-->
		<div class="row" dojoType="dojox.mvc.Group" ref="model">
			<div class="row">
				<label class="cell" for="serialInput">Order #:</label>
				<input class="cell" id="serialInput" dojoType="dijit.form.TextBox"
									ref="'Serial'"></input>
			</div>
			<div class="row">
				<label class="cell" for="lastnameInput">Last:</label>
				<input class="cell" id="lastnameInput" dojoType="dijit.form.TextBox"
									ref="'Last'"></input>
			</div>
			<div class="row">
				<label class="cell" for="emailInput">Email:</label>
				<input class="cell" id="emailInput" dojoType="dijit.form.TextBox"
									ref="'Email'"></input>
			</div>
		</div>
		<br/>
		Choose:
		<button id="shipto" type="button" dojoType="dijit.form.Button" onclick="setRef('addrGroup', model.ShipTo)">Ship To</button>
		<button id="billto" type="button" dojoType="dijit.form.Button" onclick="setRef('addrGroup', model.BillTo)">Bill To</button>
		<br/>
		<!--
			For convenience, the widget hierarchy matches the data hierarchy
			(see JavaScript object literal above).
			In this implementation, the child ref values are simple property names
			of the parent binding context.
			The ref value may support more advanced constructs, such as queries
			over the parent widget's or other application specified binding context.
		-->
		<div class="row" id="addrGroup" dojoType="dojox.mvc.Group" ref="model.ShipTo">
			<div class="row">
				<label class="cell" for="streetInput">Street:</label>
				<input class="cell" id="streetInput" dojoType="dijit.form.TextBox"
									ref="'Street'"></input>
			</div>
			<div class="row">
				<label class="cell" for="cityInput">City:</label>
				<input class="cell" id="cityInput" dojoType="dijit.form.TextBox"
									ref="'City'"></input>
			</div>
			<div class="row">
				<label class="cell" for="stateInput">State:</label>
				<input class="cell" id="stateInput" dojoType="dijit.form.TextBox"
									ref="'State'"></input>
			</div>
			<div class="row">
				<label class="cell" for="zipInput">Zipcode:</label>
				<input class="cell" id="zipInput" dojoType="dijit.form.TextBox"
									ref="'Zip'"></input>
			</div>
		</div>
		<br/>
		Model:
		<button id="reset" type="button" dojoType="dijit.form.Button" onclick="model.reset()">Reset</button>
		</div></div></div>
		<script type="text/javascript">
			function setRef(id, addrRef) {
				var widget = dijit.byId(id);
				widget.set("ref", addrRef);
			}
		</script>
	</body>
</html>
